<!--
 * Description: tags导航切换组件
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Chengming.Li
 * Date:  2020/12/22 14:22
-->
<template>
  <div v-if="tags.length > 1" class="tags-nav">
    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
      <el-tag
        v-for="(tag, index) in tags"
        :key="tag.path"
        :closable="tag.path !== '/Todo'"
        :disable-transitions="false"
        :effect="$route.path === tag.path ? 'dark' : 'plain'"
        size="small"
        @click="changeMenu(tag)"
        @close="handleClose(tag, index)"
      >
        {{ tag.label }}
      </el-tag>
    </scroll-pane>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import ScrollPane from './ScrollPane'
export default {
  name: 'TagsNav',
  components: { ScrollPane },
  computed: {
    tags() {
      return this.$store.getters['tags-menu/getTagsList']
    },
    language() {
      return this.$store.getters['language/getLanguage']
    }
  },
  watch: {
    //   监听路由变化 push页面缓存以及tag
    $route: {
      handler(to, from) {
        // 添加缓存
        this.$store.commit('tags-menu/ADD_KEEP_ALIVE_CACHE', to.name)
        // 根据ID获取菜单名称
        // 添加到tag菜单
        const menuLabel = this.$store.getters['menu/getMenuNameById'](to.path)
        const menu = {
          menuId: to.path,
          label: menuLabel,
          name: to.name
        }
        this.$store.commit('tags-menu/SELECT_MENU', menu)
      },
      immediate: true
    },
    // 监听语言的变化 修改tag的label
    language: {
      handler() {
        this.$store.commit('tags-menu/SET_TAG_LABEL')
      },
      immediate: true
    }
  },
  created() {
    this.$store.getters['tags-menu/getTagsListByLanguage']
  },
  methods: {
    ...mapMutations({
      close: 'tags-menu/CLOSE_TAG'
    }),
    // 关闭标签
    handleClose(tag, index) {
      const length = this.tags.length - 1
      this.close(tag)
      // 删除keepAlive缓存
      this.$store.commit('tags-menu/REMOVE_KEEP_ALIVE_CACHE', tag.name)
      // 如果关闭的标签不是当前路由的话，就不跳转
      if (tag.path !== this.$route.path) return
      // 关闭的标签是最右边的话，往左边跳转一个
      if (index === length) {
        this.$router.push({ path: this.tags[index - 1].path })
      } else {
        // 否则往右边跳转
        this.$router.push({ path: this.tags[index].path })
      }
    },

    // 选择标签跳转路由
    changeMenu(tag) {
      if (tag.path === this.$route.path) return
      this.$router.push(tag.path)
    }
  }
}
</script>

<style lang="scss" scoped>
.tags-nav {
  .tags-view-wrapper {
    display: flex;
    align-items: center;
    height: 40px;
    width: 100%;
    background-color: #fff;
    // overflow: hidden;
    box-shadow: 0 4px 5px rgba(0, 21, 41, 0.08);
    margin-bottom: 5px;
    margin-top: 5px;
    .el-tag {
      cursor: pointer;
      // border-left: none;
      border-radius: 0px;
      margin-left: 5px;
      font-size: 12px;
      color: #092c4d;
      border-color: #ccc;
    }
    .el-tag--dark {
      color: #fff !important;
      background-color: #2b8cfb;
      border-bottom: none;
    }
  }
}
</style>
